<style lang="scss">
* {
     margin: 0;
     padding: 0;
}

img {
     width: 100%;
}

table {
     width: 402px;
}

p {
     margin-right: 8px;
     line-height: 24px;
     margin-left: 4px;
}

.mountes {
     width: 100%;
     // height: 140px;
     background-color: #ffffff;
     position: fixed;
     bottom: 0px;
     height: 80px;

     .first {
          float: left;
          margin-top: 10px;
          margin-left: 10px;
          margin-right: 30px;

          div {
               margin-top: 6px;
               text-align: center;

               img {
                    width: 30px;
                    height: 30px;
               }
          }
     }

     .sented {
          float: left;
          margin-top: 10px;
          margin-left: 10px;
          margin-right: 30px;

          div {
               margin-top: 6px;
               text-align: center;

               img {
                    width: 30px;
                    height: 30px;
               }
          }
     }

     .seard {
          float: left;
          margin-top: 10px;
          margin-left: 10px;
          div {
               margin-top: 6px;
               text-align: center;

               img {
                    width: 30px;
                    height: 30px;
               }
          }
     }
     .foust {
          float: left;
          margin-top: 10px;
          margin-left: 40px;

          div {
               text-align: center;
               width: 180px;
               height: 45px;
               line-height: 50px;
               border-radius: 27px;
               color: #f4fffa;
               background-color: #39d067;
          }
     }
}
</style>


<template> <!-- vue实例外创建 -->

     <div v-html="dataillist.content" style="  ">

     </div>
     <!-- 点赞功能 -->
     <div class="mountes" styl>


          <div class="first">
               <!-- 点赞功能 -->
               <div @click="toggleLike">
                    <div v-if="isLiked === false">
                         <img src="../../assets/赞.png" alt="">
                    </div>
                    <div v-else>
                         <img src="../../assets/已点赞.png" alt="">
                    </div>
               </div>
               <!-- 点赞数量 -->
               <div>
                    {{ dataillist.share_num }}
               </div>
          </div>

          <div class="sented">
               <!-- 收藏 -->

               <div @click="mustleLike">

                    <div v-if="toLiked === false">
                         <img src=" ../../assets/收藏.png" alt="">
                    </div>

                    <div v-else>
                         <img src="../../assets/取消收藏.png" alt="">
                    </div>

               </div>

               <div>
                    {{ dataillist.very_favor_num }}
               </div>
          </div>


          <RouterLink to="/commonts">

               <div class="seard">

                    <!-- 评论 -->
                    <div>
                         <img src="../../assets/评论-1.png" alt="">
                    </div>

                    <div>
                              {{ moust }}
                    </div>
               </div>
          </RouterLink>

          <div class="foust">

               <span>

               </span>

               <div>
                    咨询医生
               </div>
          </div>
     </div>

     <!-- 收藏功能 -->

</template>

<script setup lang="ts">

import { ref } from 'vue'
import http from '@/http/axios'
import {  useRoute } from 'vue-router'
const route = useRoute()
const datail = JSON.parse(JSON.stringify(route.query.id))
console.log(datail);
const dataillist = ref([])
// https://www.chunyuyisheng.com/cooperation/wap/article/{id}/
// https://www.chunyuyisheng.com/cooperation/wap/health_news/
// 调用接口
const getDatail = async () => {
     await http.get(`/static/cooperation/wap/article/${datail}/`, {
          params: {
               partner: 'chunyu_wap_mini',
               promote: '0',
          },
     }).then(res => {
          // detalItem.value=res.data.content_list;
          console.log(res.data);
          dataillist.value = res.data;
     })
}
getDatail()
// 是否已经点赞

const isLiked = ref(false);
// 点赞/取消点赞的方法
const toggleLike = () => {
     if (isLiked.value) {
          // 如果已经点赞，则取消点赞并减少点赞数量
          dataillist.value.share_num--;
     } else {
          // 如果还没有点赞，则点赞并增加点赞数量
               dataillist.value.share_num++;
     }
     // 切换点赞状态
     isLiked.value = !isLiked.value;
};
// 是否已经点收藏
const Count = ref('dataillist.very_favor_num');


const toLiked = ref(false);
// 收藏/取消收藏的方法
const mustleLike = () => {
     if (toLiked.value) {
          // 如果已经收藏，则取消收藏并减少收藏数量
         dataillist.value.very_favor_num--;
     } else {
          // 如果还没有收藏，则收藏并增加收藏数量
         dataillist.value.very_favor_num++;
     }
     // 切换收藏状态
     toLiked.value = !toLiked.value;
};
   const  historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])
// 本地存储数据
 console.log(historylist.value);
 
 const moust=historylist.value.length


</script>
